<template>
  <div id="bindingexisting">
    <div class="loginBox">
      <div class="loginText"><img src="../../assets/image/login.png" width="110" height="52" alt="">
      <p>悦途自媒体平台</p></div>
      <div class="logincon">
          <p class="loginzc">绑定已有账号</p>
      <div class="loginMain">
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
          <el-form-item prop="user">
            <el-input v-model.number="ruleForm2.user" placeholder="手机号"></el-input>
          </el-form-item>
    
          <el-form-item prop="pass">
            <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="密码"></el-input>
          </el-form-item>
          <!--滑动验证-->
          <!--<div id="captcha-box"></div>-->
          <el-form-item class="btnBox">
            <el-button type="primary" @click="putTokensWxbind()" class="loginBtn">立即登录</el-button>
          </el-form-item>
        </el-form>
        <p class="attention clearfix">
          
          <span class="links"><router-link to="/binding">绑定新账号</router-link></span>
          <span class="links"><router-link to="/backpassword">忘记密码 |</router-link></span>
        </p>

      </div>
      </div>
      <div class="loginOther"></div>
    </div>
  </div>
</template>

<script>
  import {commonService} from '../../service/commonService'
  export default {
    data() {
      let checkUser = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        }else{
          callback();
        }
      };
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return {
        checked: true,
        countdown: 90, // 倒计时初始值
        isShowCountdown: 0, // 是否显示倒计时
        geetestInfo: {},
        ruleForm2: {
          pass: '',
          geetesst: false,
          user: '',
        },
        rules2: {
          user: [
            { validator: checkUser, trigger: 'blur' }
          ],

          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
        }
      };
    },
    mounted:function(){

    },
    methods: {
      putTokensWxbind() {
        let that = this
            if(that.ruleForm2.user==''){
             that.$message.error('手机号不能为空');
             return false
            }
            if(that.ruleForm2.pass==''){
            	that.$message.error('密码不能为空');
            	return false
            }
               let infoKey= window.localStorage.getItem('redisInfoKey')

//          if(geetesst){
            commonService.putTokensWxbind({redisInfoKey:infoKey,phone: that.ruleForm2.user, password: that.ruleForm2.pass,platform: 'PCH5', type: 1}).then(function (res) {
              if(res.data.success){
                localStorage.token = res.data.datas;
                that.$notify({
                  title: '登陆成功',
                  type: 'success'
                });
                that.$router.push({name: 'home'});
              }else{
                that.$notify({
                  title: res.data.message,
                  type: 'warning'
                });
              }
            });
//          }else {
//            that.$notify({
//              title: '请点击按钮进行验证',
//              type: 'warning'
//            });
//          }
     

      },
      getMess () {
        let that = this;
        commonService.getSms({phone: that.ruleForm2.user, type: 1}).then(function (res) {
          if(res.data.success){
            that.isShowCountdown = 1;
            let timer = setInterval(function () {
              that.countdown = parseInt(that.countdown) - 1;
              if(parseInt(that.countdown) == 0){
                clearInterval(timer);
                that.countdown = 90;
                that.isShowCountdown = 0;
              }
            }, 1000);

          }else{
            that.$message.error(res.data.message);
          }
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  #bindingexisting{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    background:#2d3a4b url(../../assets/image/car-publisher/bg.png) center center no-repeat;
    background-size: auto 100%;
    display: flex; justify-content: center; align-items: center;
  .loginBox{
    width: 400px;
    height: 460px;
    // background: #fff;
  .loginText{
    width: 300px;
    font-size: 26px;
    font-weight: bold;
    color: #eee;
    margin:20px auto;
    text-align: center;
    p{
       font-size: 14px;
       line-height: 20px;
       margin-top: 10px;
       color: #666;
        }
  }
  .logincon{
     width: 400px;
     height: 300px;
     background: #fff;
     .loginzc{
        padding-top: 30px;
        margin-bottom: 20px;
        color: #333;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
     }
  .loginMain{
    width: 286px; margin: 0 auto;
    .attention{
      .links{float: right;font-size: 12px; color:#666;margin-left: 4px;}
    }
    .sms-item{
      clear: both;
    .el-form-item__content{height: 40px;position:relative;}
    .el-input__inner{padding-right: 120px;}
    .el-input__suffix{right: 100px;}
    .sms{width:120px;height: 40px;line-height: 40px;display:block;position:absolute;top:0; right:8px;z-index: 1;text-align:right;}
    .sms-enable{color:#999;}
    .sms-able{color:#409EFF;cursor: pointer;}
    }
  }
}
  }
}
  .loginBtn{
    width:100%;
    border-radius: 20px;
  }

  #captcha-box{
    width:286px;
    height:44px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
    margin-bottom:30px;
    float:right;
    overflow: hidden;
  }
  .btnBox{clear:both;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius: 60px;}
</style>